<template>
	<view class="pushProfit">
		<template v-if="false">
			<view class="head">
				<!-- 币种 -->
			
				<view class="title" @click="showType(types=!types)">
					<image src="../../static/custom/money.png" mode="" class="title-img"></image>
					<text>BTC</text>
					<image src="../../static/shebei/down.png" mode="" v-show="!types" class="showme"></image>
					<image src="../../static/shebei/top.png" mode="" v-show="types" class="showme"></image>
			
				</view>
				<view class="bitypes-box">
					<view v-for="(a, index) in biType" :key="index" v-show="types" class="bitypes">
						<profitCount-type :list="a"></profitCount-type>
					</view>
				</view>
			
				<!-- 电费 -->
				<view class="title">
					<xfl-select :list="rates" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						:style_Container="'height: 40px; font-size: 16px;'" :initValue="'电费:0.01/度'"
				 	:selectHideType="'hideAll'" @change="electric">
					</xfl-select>
				</view>
			
			
				<!-- 矿机类型 -->
			
				<view class="title">
					<xfl-select :list="itcs" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						:style_Container="'height: 40px; font-size: 16px;'" :initValue="'河马'" :selectHideType="'hideAll'"
						@change="itc">
					</xfl-select>
				</view>
				<!-- Pro -->
				<view class="title">
					<xfl-select :list="pros" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						:style_Container="'height: 40px; font-size: 16px;'" :initValue="'77y'" :selectHideType="'hideAll'"
						@change="pro">
					</xfl-select>
				</view>
				<!-- 更多 -->
				<view class="muchFit">
					<button class="muchFit-btn" @click="changeMuchFit(muchFit=!muchFit)">{{$t('profitCount.more')}}</button>
					<image src="../../static/shebei/right.png" mode="" class="muchFit-img"></image>
				</view>
			</view>
			
			
			<profitCount-muchFit v-show="muchFit"></profitCount-muchFit>
			
			<!-- 开始计算 -->
			<button class="start-count">{{$t('profitCount.startComputing')}}</button>
		</template>
		<u-empty
			mode="permission"
			text="升级中"
			marginTop="200"
			icon="http://cdn.uviewui.com/uview/empty/permission.png"
		>
		</u-empty>
	</view>
</template>

<script>
	import muchFit from '../../components/profitCount-muchFit/profitCount-muchFit.vue'
	import types from '../../components/profitCount-type/profitCount-type.vue'
	import rate from '../../components/profitCount-powerRate/profitCount-powerRate.vue'
	import itcType from '../../components/profitCount-itc/profitCount-itc.vue'
	import Pro from '../../components/profitCount-Pro/profitCount-Pro.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	export default {
		components: {
			muchFit,
			types,
			rate,
			itcType,
			Pro,
			xflSelect
		},
		data() {
			return {
				muchFit: false,
				types: false,
				power: false,
				itcshow: false,
				proshow: false,
				selected: 2,
				rates: ['电费:0.01/度', '电费:0.02/度', '电费:0.03/度', '电费:0.04/度', '电费:0.05/度'],
				itcs: ['河马', '海狗', '海豹', '雪狗', '雪狼'],
				pros: ['12g', '16x', '36p', '12p', '99a', '36p', '77y'],
				biType: [ //币类型
					{
						img: '../../static/custom/money.png',
						type: 'BTC'
					},
					{
						img: '../../static/custom/money.png',
						type: 'BTC'
					},
					{
						img: '../../static/custom/money.png',
						type: 'BTC'
					},
					{
						img: '../../static/custom/money.png',
						type: 'BTC'
					},
					{
						img: '../../static/custom/money.png',
						type: 'BTC'
					},
				]
			}
		},
		methods: {
			electric(e) {
				console.log(e.newVal);
			},
			itc(e) {
				console.log(e.newVal);
			},
			pro(e) {
				console.log(e.newVal);
			},
			changeMuchFit() {
				console.log(this.muchFit);
			},
			showType() {
				console.log(this.types);
			},
			powerRates() {
				console.log(222);
			},
			itcShow() {
				console.log(22);
			},
			proShow() {
				console.log(222);
			}

		}
	}
</script>
<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style scoped>
	/* .pushProfit{
		width: 100vw;
		height: 94.6vh;
		background-color: #F3F3F3;
	} */
	.head {
		display: flex;
		width: 90%;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;

		margin: auto;
	}

	.title {
		width: 45%;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 0;
		position: relative;
		border: 2rpx #8F8F94 solid;
	}

	.title-img {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		top: 10rpx;
		left: 20rpx;
	}

	.title>text {
		font-weight: 550;
		margin: 0 20rpx;
		position: relative;
		top: -10rpx;
		left: 20rpx;
	}

	.title-zi {
		font-size: .92em;
		width: 180rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.showme {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 0px;
		top: 20rpx;
	}

	.muchFit {
		width: 100%;
		position: relative;
	}

	.muchFit-btn {
		width: 60%;
		height: 80rpx;
		border-radius: 40rpx;
		color: #005FDB;
		line-height: 80rpx;
		padding-left: -20rpx;
	}

	.muchFit-btn>text {
		margin-left: -40rpx;
	}

	.muchFit-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 24rpx;
		right: 150rpx;
	}

	.start-count {
		width: 90%;
		height: 80rpx;
		background-color: #207DFE;
		color: #FFFFFF;
		line-height: 80rpx;
		position: fixed;
		bottom: 8vh;
		left: calc(50% - 45%);
	}

	.selected {
		color: #007BFF;
	}

	.bitypes-box {
		position: fixed;
		top: 200rpx;
		left: 46rpx;
		width: 88%;
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		z-index: 66;
	}

	.bitypes {
		width: 24%;
		margin: 10rpx 0;
		text-align: center;
	}

	.powerRate {
		position: fixed;
		top: 220rpx;
		z-index: 66;
		background-color: #F3F3F3;
		width: 88%;
	}

	.powerRate>view {
		border: 2rpx solid #DEDEDE;
		height: 60rpx;
		font-size: 1.1em;
		line-height: 60rpx;
	}

	.itcTypes {
		width: 88%;
		position: fixed;
		top: 320rpx;
		z-index: 66;
		/* height: 30px; */
		font-size: 1.1em;
		line-height: 60rpx;
		background-color: #FFFFFF;
	}

	.itcTypes>view {
		border: 2rpx solid #DEDEDE;
		height: 60rpx;
		font-size: 1.1em;
		line-height: 60rpx;
		padding-left: 20rpx;
	}

	.pros {
		width: 88%;
		position: fixed;
		top: 320rpx;
		z-index: 66;
		/* height: 30px; */
		font-size: 1em;
		line-height: 60rpx;
		background-color: #FFFFFF;
	}

	.pros>view {
		border: 2rpx solid #DEDEDE;
		height: 60rpx;
		font-size: 1.1em;
		line-height: 60rpx;
		padding-left: 20rpx;
	}
</style>
